<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { VcConfigProvider, VcViewer, VcNavigation } from 'vue-cesium'
import type { VcReadyObject } from 'vue-cesium/es/utils/types.js';
import VueCesium from './VueCesium.vue'

const vcConfig = reactive({
  cesiumPath: 'https://unpkg.com/cesium@latest/Build/Cesium/Cesium.js'
});

//在 Vue for Cesium 中继续使用原生 CesiumJS API 开发
const viewerRef = ref<HTMLElement>(null)

onMounted(() => {
  viewerRef.value.creatingPromise.then((readyObj: VcReadyObject) => {
    console.log(readyObj.Cesium);//Cesium命名空间对象
    console.log(readyObj.viewer);//Cesium.Viewer对象
  });
});

const onViewerReady = (readyObj: VcReadyObject) => {
  console.log(readyObj.Cesium); //Cesium命名空间对象
  console.log(readyObj.viewer); //Cesium.Viewer对象
}

const sceneMode = ref(3)
const sceneModeText = ref("2D")

const onButtonClick = () => {
  console.log(sceneMode.value, sceneModeText.value)
  sceneMode.value = sceneMode.value == 2 ? 3 : 2;
  sceneModeText.value = sceneMode.value == 2 ? "3D" : "2D"
  console.log(sceneMode.value, sceneModeText.value)
}

//版权信息
const showCredit = ref(false)
//鹰眼图默认是否收缩
const modelValue = ref(false)

</script>

<template>
  <vc-config-provider>
    <vc-viewer ref="viewerRef" @ready="onViewerReady" :sceneMode="sceneMode" :show-credit="showCredit" sceneModePicker 
    :selection-indicator="true" 
    :info-box="true"
    >
      <!-- 导航 -->
      <vc-navigation position="top-left"></vc-navigation>
      <button @click="onButtonClick" class="switchScene">切换{{ sceneModeText }}</button>
      <!-- 天地图层 -->
      <vc-layer-imagery>
        <vc-imagery-provider-tianditu map-style="img_c"
          token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
      </vc-layer-imagery>
      <vc-layer-imagery ref="layerText">
        <vc-imagery-provider-tianditu map-style="cia_c"
          token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
      </vc-layer-imagery>
      <!-- 鹰眼图 -->
      <vc-overview-map position="bottom-right" width="300px" height="300px" :offset="[5, 5]" :modelValue="modelValue">
        <vc-layer-imagery>
          <vc-imagery-provider-tianditu map-style="img_c"
            token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
        </vc-layer-imagery>
        <vc-layer-imagery ref="layerText">
          <vc-imagery-provider-tianditu map-style="cia_c"
            token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
        </vc-layer-imagery>
      </vc-overview-map>
      <!-- 实体 -->
      <vc-entity>

      </vc-entity>
      <!-- 加载进度条 -->
    <vc-ajax-bar position="top" color="#6e0000" size="10px" positioning="fixed"></vc-ajax-bar>
      <!-- 其他组件 -->
      <vue-cesium v-if="false"></vue-cesium>
    </vc-viewer>
  </vc-config-provider>
</template>

<style scoped>
.switchScene {
  display: none;
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
}
</style>
